<template>
  <div class="dialog-custom" v-if="props.modelValue" ref="appRef" :style="floatStyles">
    <div ref="dialogChartRef" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { defineProps, ref, defineExpose, nextTick } from 'vue'
import useDraw from '@/utils/useDraw'
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  floatStyles: {
    type: Object,
    default: () => ({})
  }
})
const dialogChartRef = ref(null)
const updateChart = () => {
  // 初始化echarts实例
  let chart = echarts.init(dialogChartRef.value)

  let option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(8,45,74,0.85)',
      borderColor: 'rgb(140,255,74)', //设置边框颜色
      padding: 12,
      axisPointer: {
        type: 'shadow'
      },
      textStyle: {
        fontSize: 40,
        color: '#fff',
        align: 'left'
      },
    },
    xAxis: {
      type: 'category',
      data: [
        '2024-4',
        '2024-5',
        '2024-6',
        '2024-7',
        '2024-8',
        '2024-9',
        '2024-10'
      ],
      axisLabel: {
        interval: 0,
        textStyle: {
          fontSize: 40,
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },

      axisLine: {
        show: true,
        lineStyle: {
          // 坐标线
          type: 'solid',
          color: 'rgba(0, 0, 0, 0.5)', // 轴的颜 色
          width: '1' // 坐标线宽度
        }
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          // 坐标线
          type: 'solid',
          color: 'rgba(0, 0, 0, 0.5)', // 轴的颜 色
          width: '1' // 坐标线宽度
        }
      },
      axisTick: {
        show: true
      },

      axisLabel: {
        textStyle: {
          fontSize: 40,
          color: '#fff'
        }
      }
    },
    series: [
      {
        name: '实际值',
        data: [120, 132, 101, 134, 190, 130, 220],
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 5
        },
        showAllSymbol: true, //显示所有图形。
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 20, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          borderColor: '#fff',
          borderWidth: 5
        },
      },
      {
        name: '预测值',
        data: [120, 124, 190, 145, 140, 121, 120],
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 5
        },
        showAllSymbol: true, //显示所有图形。
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 20, //标记的大小
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 5
        },
      },
      {
        name: '未来预测值',
        data: [110, 114, 105, 118, 102, 116, 114],
        type: 'line',
        smooth: true,
        showAllSymbol: true, //显示所有图形。
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 20, //标记的大小
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 5
        },
        lineStyle: {
          width: 5,
          type: 'dotted' //'dotted'虚线 'solid'实线

        },
      }
    ]
  };
  chart.setOption(option, true)
  const { appRef, calcRate, windowDraw } = useDraw()
  windowDraw()
  calcRate()
}

defineExpose({
  updateChart
})
</script>
<style scoped lang="scss">
.dialog-custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 1500px;
  height: 600px;
  border: 1px solid #7FE5DE;
  border-radius: 10px;
  background-color: rgba(5,27,91,.8);
  z-index: 9999;
}
</style>
